Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

155
Vistas
file name [object Object] on angular file upload

when I try to attach a file, the file name does not come out and comes out "[object Object] would anyone know how to help me? I can't get any names to appear

export class ReclamiRaccoltaComponent implements OnInit {

  files: any[] = []


  onChange(event) {
    for (let file of event.target.files) {
      this.files.push({
        name: file.name,
        type: file.type,
        size: file.size
      });
    }
  }
<form method="post" action="" enctype="multipart/form-data">
  <input type="file" onChange="console.log(event.target.files[0].name)" #fileInput (change)="onChange($event)" name="upload1" id="upload1" class="upload" multiple="multiple" />
  <label for="upload1">
    <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-upload"></use></svg>
    <span>Upload</span>
  </label>
  <ul class="upload-file-list" *ngFor="let file of files">
    <li class="upload-file success">
      <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-file"></use></svg>
      <p>
        <span class="sr-only">File caricato:</span>
        {{file}} <span class="upload-file-weight">KB</span>
      </p>
      <button disabled>
        <span class="sr-only">Caricamento ultimato</span>
        <svg class="icon" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-check"></use></svg>
      </button>
    </li>
  </ul>
</form>
           <button [disabled]="!form.valid" onclick="notificationShow('notificationIcnTxt', 6000)" type="submit" class="btn mb-5 btn-primary" style="width: 120px; height: 60px;">INVIA</button>

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You can use filereader() function in angular to read input file.


    // This is typescript code only runs with angular
    // This is typescript code only runs with angular
    // This is typescript code only runs with angular


    fileName: string;
    fileSize: number;
    fileType: string;

    loadFile(event): void {
      const inputValue = event.target;
      const file: File = inputValue.files[0];
      const myReader: FileReader = new FileReader();
      myReader.readAsDataURL(file);
      myReader.onloadend = (e) => {
        console.log(e);
        this.fileName = file.name;
        this.fileSize = file.size;
        this.fileType = file.type
        myReader.result as string; // this is base64 string to upload or save in DB
       };
    }

    <input type="file" id="file" class="input" (change)="loadFile($event)" />
    <p>Name: {{fileName}}</p>
    <p>Size: {{fileSize}}</p>
    <p>Type: {{fileType}}</p>

see stackblitz live example here

about 4 years ago · Juan Pablo Isaza Denunciar

0

You get object object because file is an object. If you want the name you need to ask {{ file.name }} type {{ file.type }} size {{ file.size }}

<form method="post" action="" enctype="multipart/form-data">
      <input type="file" onChange="console.log(event.target.files[0].name)" #fileInput (change)="onChange($event)" name="upload1" id="upload1" class="upload" multiple="multiple" />
      <label for="upload1">
        <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-upload"></use></svg>
        <span>Upload</span>
      </label>
      <ul class="upload-file-list" *ngFor="let file of files">
        <li class="upload-file success">
          <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-file"></use></svg>
          <p>
            <span class="sr-only">File caricato:</span>
            {{file.name}} {{file.type}} {{file.size}} <span class="upload-file-weight">KB</span>
          </p>
          <button disabled>
            <span class="sr-only">Caricamento ultimato</span>
            <svg class="icon" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-check"></use></svg>
          </button>
        </li>
      </ul>
    </form>
               <button [disabled]="!form.valid" onclick="notificationShow('notificationIcnTxt', 6000)" type="submit" class="btn mb-5 btn-primary" style="width: 120px; height: 60px;">INVIA</button>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda